<template>
  <!-- 监控 任务 监控分组 关联商品 -->
  <el-dialog
    title="新增商品"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    fullscreen
    width="1300px"
  >
  <div>
    <el-button type="primary" plain @click="close">返回</el-button>
  </div>
    <div class="task_goods_add_box" v-loading="loading">
      <div class="tip">提示：本工具只能监控QQ号码的掉绑，请不要选择微信账号或者其他账号！</div>
      <div class="tip">收费标准：
       <span v-if="shopInfo&&shopInfo.baseServer == 2" style="text-decoration: line-through;color: #999;">{{yudou.cost}}</span> 
        <span v-else>{{yudou.cost}}</span> 
       虞豆/账号/次</div>
      <div class="tip">请勾选需要加入监控的商品</div>
      <div class="content-box flex">
        <div class="left">
          <!-- <h2>待加入的商品</h2> -->
          <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            label-width="auto"
          >
          <el-form-item label="游戏名称" prop="gameId">
            <el-select clearable filterable v-model="queryParams.gameId" @change="gameChange" style="width: 150px;">
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item) in gameList"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="商品编号" prop="id">
              <el-input
              style="width: 150px;"
                v-model="queryParams.id"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <el-form-item label="游戏账号" prop="accountNumber">
              <el-input
              style="width: 150px;"
                v-model="queryParams.accountNumber"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <el-form-item class="btns">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="queryParams.pageNum=1; getGoodsList()"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
          <div class="table_box" v-if="dialogVisible">
            <el-table ref="table" stripe :data="goodsTable.rows" row-key="id" style="width: 100%" 
            @selection-change	="handleSelection">
              <el-table-column label="全选" reserve-selection type="selection" width="55">
              </el-table-column>
              <el-table-column prop="id" label="商品编号"  ></el-table-column>
              <el-table-column label="商品价格"  prop="price"/>
              <el-table-column label="游戏账号" prop="accountNumber" />
              <el-table-column label="手机号" prop="securityPhone" >
                <template slot-scope="scope">
                  <div>
                    <span v-if="taskInfo.type==2">{{scope.row.changeTel}}</span>
                    <span v-if="taskInfo.type==1">{{scope.row.securityPhone}}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="商品状态" prop="saleState">
                <template slot-scope="scope">
                  <el-tag :type="statusMap[scope.row.saleState] ? statusMap[scope.row.saleState].type : ''">{{
                    statusMap[scope.row.saleState] ? statusMap[scope.row.saleState].name : '' }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="游戏名称"  prop="gameName" />
              <el-table-column label="区服" show-overflow-tooltip  prop="systemName">
                <template slot-scope="scope">
                  <span>{{ scope.row.systemName ? scope.row.systemName + '/' : '' }}</span>
                  <span>{{ scope.row.carrierName ? scope.row.carrierName + '/' : '' }}</span>
                  <span>{{ scope.row.groupName ? scope.row.groupName + '/' : '' }}</span>
                  <span>{{ scope.row.serverName }}</span>
                </template>
              </el-table-column>
              
              
              <!-- <el-table-column label="自编号" width="100" prop="thirdId" /> -->
              
              <!-- <el-table-column label="商品标题" min-width="300" prop="title">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" :content="scope.row.title" placement="top-start">
                    <div class="zdy-des">{{ scope.row.title }}</div>
                  </el-tooltip>
                </template>
              </el-table-column> -->
            </el-table>
            <pagination v-show="goodsTable.total > 0" :total="goodsTable.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
              @pagination="getGoodsList" />
          </div>
        </div>
        <div class="right">
          <!-- 已选择的商品 -->
          <h2>本次选择的商品（{{selects.length}}）</h2>
          <div class="table_box">
            <el-table height="516px" stripe :data="selects" style="width: 100%" >
              <el-table-column prop="id" label="商品编号" ></el-table-column>
              <el-table-column label="商品价格"  prop="price"/>
              <el-table-column label="游戏账号" prop="accountNumber" />
              <el-table-column label="手机号" prop="securityPhone" width="120">
                <template slot-scope="scope">
                  <div>
                    <span v-if="taskInfo.type==2">{{scope.row.changeTel}}</span>
                    <span v-if="taskInfo.type==1">{{scope.row.securityPhone}}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="商品状态" prop="saleState">
                <template slot-scope="scope">
                  <el-tag :type="statusMap[scope.row.saleState] ? statusMap[scope.row.saleState].type : ''">{{
                    statusMap[scope.row.saleState] ? statusMap[scope.row.saleState].name : '' }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="游戏名称"  prop="gameName" />
              <el-table-column label="区服" show-overflow-tooltip  prop="systemName">
                <template slot-scope="scope">
                  <span>{{ scope.row.systemName ? scope.row.systemName + '/' : '' }}</span>
                  <span>{{ scope.row.carrierName ? scope.row.carrierName + '/' : '' }}</span>
                  <span>{{ scope.row.groupName ? scope.row.groupName + '/' : '' }}</span>
                  <span>{{ scope.row.serverName }}</span>
                </template>
              </el-table-column>
              
              <el-table-column  label="操作">
                <template slot-scope="scope">
                  <el-button type="del"  @click="remove(scope.row)">移除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      
    </div>
    <div slot="footer" class="center">
          <el-button @click="close()">取消</el-button>
          <el-button
            type="primary"
            @click="submitForm('form')"
            v-loading="loading"
            >提交</el-button
          >
        </div>
  </el-dialog>
</template>
<script>
import checkPhoneApi from "@/api/gameConfig/checkPhonePx";
import gameListApi from "@/api/gameConfig/gameList"
import goodsListApi from "@/api/gameConfig/goodsList";
import gameDictionaryApi from "@/api/gameConfig/gameDictionary";
export default {
  name: "",
  data() {
    return {
      dialogVisible: false,
      loading: false,
      statusMap: {
        0: {
          name: "待审核",
          type: "warning",
        },
        1: {
          name: "在售商品",
          type: "success",
        },
        2: {
          name: "交易中",
          type: "warning",
        },
        3: {
          name: "已售商品",
          type: "",
        },
        4: {
          name: "下架商品",
          type: "danger",
        },
        5: {
          name: "问题商品",
          type: "danger",
        },
        6: {
          name: "损耗商品",
          type: "danger",
        },
        88: {
          name: "回收中",
          type: "warning",
        },
      },
      taskTypeOptions:
      {
        1:{
          label: "掉绑监控",
          value: 1,
          type:'success'
        },
        2:{
          label: "转手监控",
          value: 2,
          type:'danger'
        }
      },
      goodsTable:{
        rows:[],
        total:0
      },
      selects:[],
      pageSelects:[],
      queryParams:{
        pageSize:10,
        pageNum:1,
        saleState:1,
        gameId:'',
        id:'',
        accountNumber:''
      },
      rules: {
        name: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        type: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        intervalDays: [{ required: true, message: "请输入", trigger: "change" }],
     
      },
      taskInfo:{},
      gameList:[],
      carrierId:'',
      yudou:{
        cost:1
      }
    };
  },
  computed: {
      shopInfo() {
      return this.$store.getters.shopInfo;
    },
  },
  created() {},
  methods: {
    // 打开弹窗
    open(taskInfo) {
      this.getYudou()
      this.queryParams={
        pageSize:10,
        pageNum:1,
        saleState:1,
        gameId:'',
        id:'',
        accountNumber:''
      }
      this.taskInfo = taskInfo
      this.selects = []
      this.dialogVisible = true;
      this.getGameList()
    },
    // 获取可加入的游戏类型
    getGameList(){
      gameListApi.getGameList({carrierType:1}).then(async res=>{
        this.gameList = res.rows
        this.queryParams.gameId = this.gameList[0].id
        await this.getYysList()
        this.getGoodsList()
      })
    },
    // 选择游戏改变
    async gameChange(e){
      await this.getYysList()
    },
    //获取每次监控需要的虞豆 
    
    getYudou(){
      this.getDicts('monitorConfig').then(res=>{
      if(res.data&&res.data.length){
        res.data.forEach(r=>{
          this.yudou[r.dictLabel] = Math.abs(r.dictValue) 
        })
      }
      // this.yudou
      // console.log("%c Line:279 🍺 this.yudou", "color:#ffdd4d", this.yudou);
    })
    },
    // 获取运营商列表
    async getYysList() {
      try {
        const res = await gameDictionaryApi.getChildList({
          gameId: this.queryParams.gameId,
          systemKey: 'carrier'
        })
        if(res.rows&&res.rows.length){
            res.rows.forEach(r => {
              if(r.fieldName=='QQ'){
                this.carrierId = r.id
                
              }
            });
          }else{
            this.carrierId = ''
          }
        } catch (error) {
          this.carrierId = ''
        }
    },
    // 获取未监控的商品列表
    getGoodsList(){
      if(this.queryParams.accountNumber&&this.queryParams.accountNumber.length<4){
        return this.$message.error('游戏账号不能少于4位！')
      }
      this.loading = true
      if(this.taskInfo.type==1){
        this.queryParams.saleState=1
      }else if(this.taskInfo.type==2){
        this.queryParams.saleState=3
      }
      this.queryParams.monitoringState = 3
      this.queryParams.carrierId = this.carrierId
      goodsListApi.getGoodsAllList(this.queryParams)
      .then(response => {
        this.loading = false;
        this.goodsTable=response
      })
      .catch(err => {
        this.loading = false;
      });
    },
  
    // 表格选择项改变
    handleSelection(arr) {
      let reg = new RegExp(/^[1-9][0-9]{4,10}$/) 
      let reg2 = new RegExp(/^(1[0-9][0-9])\d{8}$/) 
      this.selects = arr
      if(arr&&arr.length){
        arr.forEach(r=>{
          if( reg.test(r.accountNumber)){
          }else{
            // 取消选中
            this.$refs.table.toggleRowSelection(r,false)
            this.$alert(`包含账号不是QQ号码的商品，无法添加！`)
          }
          if( reg2.test(this.taskInfo.type==1? r.securityPhone:r.changeTel)){
          }else{
            // 取消选中
            this.$refs.table.toggleRowSelection(r,false)
            this.$alert(`没有手机号码的商品，无法添加！`)
          }
        })
      }
    },
    //移除已选择
    remove(row){
      this.$refs.table.toggleRowSelection(row,false)
    },
    // 重置
    reset() {
      this.form= {
        gameId: "",
        pageNum: 1,
        pageSize:10,
      }
      this.$refs.form.resetFields();
    },
   
    submitForm(formName) {
      if(this.selects.length==0){
        return this.$message.error('请选择商品！')
      }
      this.$confirm("确认将已选择的商品添加到监控任务中吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true
          // 保存商品 monitorTaskId:监控id
          // goodsIds: 逗号分割的商品ids
          let goodsIds = []
          for(let i=0;i<this.selects.length;i++){
            const selectItem = this.selects[i]
            goodsIds.push(selectItem.id)
          }
          checkPhoneApi.taskAddGoods({
            goodsIds:goodsIds.join(','),monitorTaskId:this.taskInfo.id
          }).then(res => {
            this.loading = false
            this.$message.success(res.msg);
            this.dialogVisible = false;
            this.$parent.getList();
          }).catch(err=>{
            this.loading = false
          })
        })
        .catch(() => {});
      


     
    },
    close() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.tip {
  color: red;
}
.task_goods_add_box{
  width: 100%;
  .content-box{
    width: 100%;
    flex-wrap: nowrap;
    margin-top: 10px;
    min-height: 600px;
    >div{
      width: 50%;
    }
    .left{
      margin-right: 10px;
    }
  }
}
::v-deep .el-dialog__body{
  max-height: calc(100vh - 120px) !important;
}
</style>
